<!--已分配的目标用户管理-->
<template>
  <div>

    <Row class="y_query_right">
      <i-col span="24">
        <Button type="primary" icon="md-search" @click="search()" class="y_condition">查询</Button>
      </i-col>
    </Row>

    <!--表格和分页-->
<!--    <Table stripe border ref="userInfo" :columns="tableTitles" :data="userList"
           class="table_css"
           no-data-text="暂无数据" ></Table>-->
    <List border class="data-list">
      <template v-if="userList.length == 0">
        <ListItem class="list-item">
          <div style="width: 100%; text-align: center; color: #ccc;">暂无数据</div>
        </ListItem>
      </template>
      <template v-else>
        <ListItem v-for="(item, index) in userList" :key="index" class="list-item">
          <div class="item-top">
<!--              <Checkbox :label="item.id" :disabled="item.state==300 || item.state == 310"><span></span></Checkbox>-->
            <KeyValueView title="独立站编号" :value="item.number"></KeyValueView>
            <KeyValueView title="独立站" v-if="isNotEmpty(item.externalUrl)">
              <Tooltip :content="item.externalUrl" placement="top">
                <a target="_blank" :href="item.externalUrl">点击访问</a>
              </Tooltip>
            </KeyValueView>
          </div>
          <div class="item-top">
            <KeyValueView title="站内信地址" v-if="isNotEmpty(item.contactUrl)"><a target="_blank" :href="item.contactUrl">点击访问</a></KeyValueView>
            <KeyValueView title="邮箱" :value="isNotEmpty(item.externalEmail)?'有':'无'"></KeyValueView>
            <KeyValueView title="负责员工" :value="item.employeeName"></KeyValueView>
          </div>
          <div class="item-bottom">
            <Button type="success" size="small" icon="md-checkmark" v-has="'OPERATIONS-4-201'" @click="setEffective(index)">改为有效</Button>
          </div>
        </ListItem>
      </template>
    </List>
    <div style="float: right; margin-top: 20px;">
      <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[40,60,80]"
            show-sizer show-elevator/>
    </div>
  </div>

</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/invalidCustomer/invalidCustomer_data";
  import {searchService, setCustomerEffective} from "./js/invalidCustomer/invalidCustomer_funs"
  import {isNotEmpty} from "../js/commonUtils";
  import KeyValueView from "../widgets/KeyValueView";

  export default {
    components: {KeyValueView, ICol},
    data(){
      return {
        tParam: tiyData.tParams,
        tPage: tiyData.tPage,
        userList: tiyData.tData.userList,
        tableTitles:tiyData.tableTitles(this)
      }
    },
    computed: {

    },
    methods: {

      changePage(page){
        tiyData.tPage.currentPage = page;
        searchService(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        searchService(this, tiyData);
      },
      search(){
        tiyData.tPage.currentPage = 1;
        searchService(this,tiyData);
      },
      setEffective(index){
        let user = this.userList[index];
          let msg = "确认设置编号为" + user.number + "的客户";
          if(user.name){
              msg += user.name;
          }
          msg += " 为有效客户？";
        this.$Modal.confirm({
          title: "确认",
          content: msg,
          onOk: () => {
            tiyData.tParams.changeStateCustomerInfo.id = user.id;
            tiyData.tParams.changeStateCustomerInfo.number = user.number;
            setCustomerEffective(this, tiyData, 200);
          }
        })
      },
      hasAuthority(code) {
        return this.$authority(code);
      },
      isNotEmpty(val) {
        return isNotEmpty(val);
      },
    },
    created(){
      // searchService(this,tiyData);
    }
  }
</script>

<!--css样式-->
<style scoped lang="less">
  @import  (once,optional)  "../css/base.less";

  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .modal_newuser_form {
    padding-left: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .modal_newuser_form_input {
    width: 180px;
    margin-right: 10px;

  }

  .tiy_key {
    color: #9e9e9e;
    min-width: 90px;
    display: inline-block;
    text-align: right;
    padding-right: 0.5rem;
  }

  .data-list {
    margin: 1rem 0rem;
    line-height: 25px;
    .list-item {
      .flex-colum-wrap;
      justify-items: left;
      align-items: start;
      .item-checkbox {
        display: inline-block;
        width: 25px;
        height: 25px;
        text-align: center;
        vertical-align: top;
      }
      .item-img {
        width: 130px;
        text-align: center;
        display: inline-block;
      }
      .item-top{
        width: 100%;
        margin-bottom: 5px;
        .flex-row-wrap;
        justify-content: left;
      }
      .item-content {
        margin-bottom: 35px;
        text-align: left;
      }
      .item-bottom{
        //position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        display: block;
        //padding: 0 1rem 0.5rem 0;
        text-align: right;
        button {
          margin-left: 0.5rem;
        }
      }
    }
  }
</style>
